<template>
  <div>
      <h1>{{obj.info.shengao}}</h1>
      <h1>{{obj.sex}}</h1>
      <h1>{{obj.age}}</h1>
      <h1 v-for="item in arr" :key="item" >{{item}}</h1>
      <button @click="toChange">给vue的data对象和数组类型 新增内容</button>
       <button @click="toAdd">新增</button>
       <hr />
       <mine-son :age="18" :sex="mysex" color="red" autoplay="true" inteval="3000" size="80" @sendmsg="getData" @sendname="getVal">
            <template v-slot:footer>
              <div>
                  <h1>我是脚步</h1>
              </div>
            </template>
             <template #con>
              <div>
                  <h1>我是内容</h1>
              </div>
            </template>
       </mine-son>

  </div>
</template>

<script>
import mineSon from './MineSon'
export default {
  name: 'Vue2304BMine',
  components:{mineSon},
  data() {
    return {
      mysex:"女",
       msg:"你好",
      arr:["孙悟空","猪八戒","唐僧"],
        obj:{
         
          name:"张三",
          info:{shengao:180,tizhong:150,hobby:["吃","学习","敲代码"]}
        }
    };
  },
created() {
    console.log("触发created...")
},
  mounted() {
      console.log("触发mounted....")
  },

  methods: {
    toChange(){
      // vue2的 响应式原理是 Object.defineproperty()
      // 进入组件 一次性的 把data的数据一次监听完毕
      // 给对象和数组新增数据，无法监听到
      // vue3 换成proxy代理后，解决这个问题


      // this.obj.sex="男"

      // this.$set()
      // 给对象使用
      //  this.$set(对象,'key',"value")
      this.$set(this.obj,'sex',"男")

      // 删除对象的某个属性
      // this.$delete(this.obj,'sex')

      // 数组的$set写法
      // this.arr[3]='白龙马'
      this.$set(this.arr,3,'白龙马')
    },
    toAdd(){
      this.obj.age="28"

      // 强制更新组件  从新创建到挂载的过程
      this.$forceUpdate();
    },
    getData(){
   
    },
    getVal(){}
  },
};
</script>